<template>
  <div class="home">
    <div class="clear_style">
      <el-button
        type="primary"
        @click="clear"
      >清空</el-button>
    </div>
    <div id="map"></div>
    <div class="draw_style">
      <el-select
        v-model="model"
        @change='selectDraw'
        placeholder="请选择绘图方式"
      >
        <el-option
          v-for="item in drawStyle"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="time_box">
      <el-date-picker
        v-model="historyTime"
        popper-class="history_time"
        type="date"
        key="select_day"
        placeholder="选择历史轨迹日期"
        name="select_day"
      >
      </el-date-picker>
      <el-time-select
        v-model="startTime"
        key="select_startTime"
        placeholder="开始时间"
        start='00:00'
        step='00:15'
        end='23:59'
      >
      </el-time-select>
      <el-time-select
        key="select_endTime"
        v-model="endTime"
        placeholder="结束时间"
        start='00:00'
        step='00:15'
        end='23:59'
        :minTime="startTime"
      >
      </el-time-select>
      <div
        class="search_time_btn"
      >
        <span class="icon_search"></span>
        查询
      </div>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
// import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Style, Icon, Stroke, Circle, Fill } from "ol/style";
import { Point } from "ol/geom";
import Polygon from "ol/geom/Polygon";
import VectorSource from "ol/source/Vector";
// import { transform } from "ol/proj";
import gisApi from "../../gisApi";
import { Draw } from "ol/interaction";
import { getCenter } from "ol/extent";
export default {
  data() {
    return {
      map: null,
      drawStyle: [
        { label: "圆形", value: "Circle" },
        { label: "多边形", value: "Polygon" },
        { label: "点", value: "Point" },
      ],
      model: "",
      historyTime:'',
      startTime:'',
      endTime:'',
      drawLayer: null,
      draw: null,
      polygonData: [
        [12727286.142932441, 3565816.87607386],
        [12727274.332413288, 3565711.6551905456],
        [12727274.690302016, 3565690.5394006404],
        [12727289.363958295, 3565683.7394328974],
        [12727280.058714848, 3565608.2237508693],
        [12727379.553310256, 3565596.0553702945],
        [12727402.100627767, 3565669.423665345],
        [12727411.763787247, 3565761.044585869],
        [12727412.837480737, 3565803.2760974164],
      ],
      coordinates: [
        [12729061.664567024, 3568670.000910808],
        [12729008.158588907, 3568551.5234950976],
        [12728958.474403888, 3568444.5116846566],
        [12728908.790510453, 3568322.212410242],
        [12728836.175275264, 3568173.160219665],
        [12728771.203626271, 3568043.2171403673],
        [12728702.410475766, 3567913.274352654],
        [12728645.082704552, 3567783.331346252],
        [12728591.576726435, 3567668.6758038243],
        [12728522.783284346, 3567550.198468299],
        [12728476.921184007, 3567416.4336688],
        [12728419.593412794, 3567286.4906623987],
        [12728163.52930972, 3566300.452968361],
        [12728045.051974194, 3566300.452968361],
        [12727869.246867456, 3566323.3841643217],
        [12727693.441702401, 3566369.2464104514],
        [12727502.349073369, 3566407.464924594],
        [12727345.653223703, 3566411.286717691],
        [12727143.095098747, 3566407.464924594],
        [12726932.89312517, 3566422.7522427756],
      ],
      features: [],
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    //初始化地图
    mapInit() {
      var source = new XYZ({
        url: gisApi.layerConfig.tileUrl,
      });
      this.layer = new TileLayer({
        source: source,
        style: {
          fill: "rgba(255, 255, 255, 0.5)",
          stroke: {
            color: "#409eff",
            width: 2,
          },
          circle: {
            radius: 6,
            fill: "#409eff",
            stroke: {
              width: 1,
              color: "#fff",
            },
          },
        },
      });
      // 添加一个绘制的线使用的layer
      this.drawLayer = new VectorLayer({
        //layer所对应的source
        source: new VectorSource(),
      });
      //把layer加入到地图中
      this.map = new Map({
        target: "map",
        layers: [this.layer],
        view: new View({
          projection: "EPSG:3857",
          extent: gisApi.mapConfig.extent,
          center: gisApi.mapConfig.center,
          minZoom: 1,
          maxZoom: 19,
          zoom: 10,
        }),
      });
      this.map.addLayer(this.drawLayer);
      this.addPoint();
      this.addPolygon();
    },
    addPolygon() {
      var polygon = new Polygon([this.polygonData]);
      var feature = new Feature(polygon);
      this.features.push(feature);
      var vectorSource = new VectorSource();
      vectorSource.addFeature(feature);
      if (this.polygonLayer == null) {
        this.polygonLayer = new VectorLayer({
          style: new Style({
            stroke: new Stroke({
              color: "rgba(100, 255, 0, 1)",
              width: 2,
            }),
            fill: new Fill({
              color: [0, 0, 255, 0.2],
            }),
          }),
          source: vectorSource,
        });
        this.map.addLayer(this.polygonLayer);
      }
    },
    selectDraw() {
      // this.clear();
      this.drawEnd();
      this.addInteraction((e) => {
        console.log(e);
        var sum = 0;
        var geo = e.feature.getGeometry();
        this.features.forEach((item) => {
          var isIn = geo.intersectsCoordinate(
            getCenter(item.getGeometry().getExtent())
          );
          if (isIn) {
            sum++;
            item.setStyle(
              new Style({
                image: new Icon({
                  scale: 1,
                  anchor: [0.5, 1],
                  src: require("../assets/red.png"),
                  brush: null,
                }),
                stroke: new Stroke({
                  color: "red",
                  width: 2,
                }),
              })
            );
          }
        });
        alert("已选中" + sum);
      });
    },
    //添加点
    addPoint() {
      this.features = [];
      this.coordinates.forEach((item) => {
        //通过坐标生成点要素
        var point = new Feature({
          type: "icon",
          geometry: new Point(item),
        });
        this.features.push(point);
      });
      //生成点的矢量图层
      var vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: this.features,
        }),
        style: new Style({
          image: new Icon({
            scale: 1,
            anchor: [0.5, 1],
            src: require("../assets/skyBlue.png"),
            brush: null,
          }),
        }),
      });
      //添加到地图中
      this.map.addLayer(vectorLayer);
    },
    //添加绘画
    addInteraction(callback) {
      if (!this.drawLayer) return;
      if (this.model !== "") {
        this.draw = new Draw({
          source: this.drawLayer.getSource(),
          type: this.model,
          style: new Style({
            stroke: new Stroke({
              color: "#409eff",
              width: 3,
            }),
            circle: new Circle({
              radius: 6,
              fill: new Fill({ color: "#409eff" }),
              stroke: new Stroke({
                width: 1,
                color: "#fff",
              }),
            }),
          }),
        });
        this.drawStartHandler = (e) => {
          /**
           * 开始绘画时触发
           * @event drawstart
           * @param {Object} e 事件对象，{feature}
           */
          this.$emit("drawstart", e);
        };
        this.drawEndHandler = (e) => {
          callback && callback(e);
          /**
           * 结束绘画时触发
           * @event drawend
           * @param {Object} e 事件对象，{feature}
           */
          this.$emit("drawend", e);
        };
        this.draw.on("drawstart", this.drawStartHandler);
        this.draw.on("drawend", this.drawEndHandler);
        this.map.addInteraction(this.draw);
      }
    },
    //结束绘画
    drawEnd() {
      if (this.draw) {
        this.draw.un("drawstart", this.drawStartHandler);
        this.draw.un("drawend", this.drawEndHandler);
        this.draw.dispose();
        this.map.removeInteraction(this.draw);
        this.draw = null;
      }
    },
    //清空绘画
    clear() {
      const source = this.drawLayer.getSource();
      source.clear();
      this.features.forEach((item) => {
        item.setStyle(
          new Style({
            image: new Icon({
              scale: 1,
              anchor: [0.5, 1],
              src: require("../assets/skyBlue.png"),
              brush: null,
            }),
            stroke: new Stroke({
              color: "rgba(100, 255, 0, 1)",
              width: 2,
            }),
            fill: new Fill({
              color: [0, 0, 255, 0.2],
            }),
          })
        );
      });
    },
  },
};
</script>
<style lang="scss">
.home {
  height: 100%;
}
#map {
  height: 100%;
}
.draw_style {
  position: absolute;
  bottom: 5%;
  left: 22%;
}
.clear_style {
  position: absolute;
  top: 10%;
  left: 22%;
  z-index: 999;
}
.time_box {
  width: 5.8rem;
  height: 0.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  .search_time_btn {
    width: 0.8rem;
    height: 0.38rem;
    background: #3c98d0;
    border-radius: 0.04rem;
    display: flex;
    justify-content: space-evenly;
    color: #fff;
    align-items: center;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>